<template>
  <div class="content">
    <van-nav-bar
      title="设置"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="box">
      <van-cell is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <div class="nav-img" @click="onSetuo">
            <img :src="user.headerimg" alt="" />
            <p>
              <span>{{ user.nick }}</span>
            </p>
          </div>
        </template>
      </van-cell>
    </div>
    <div class="Shipping">
      <van-cell title="收货地址" is-link to="/address" />
      <van-cell title="意见反馈" is-link />
      <van-cell title="清除缓存" is-link value="55.8M" />
      <van-cell title="意见反馈" is-link />
      <van-cell title="分享APP" @click="showShare = true" />
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      />
      <div class="content">
        <p class="cont" @click="Onsign">退出</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: "",
      show: false,
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },
  created() {
    this.user = this.$store.getters.user;
    console.log(">>>>", this.user);
  },
  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    showPopup() {
      this.show = true;
    },
    onSetuo() {
      this.$router.push({ path: "/setupMy" });
    },
    Onsign() {
      let token = this.$store.getters.token;
      if (token!==''){
        this.$store.dispatch("deleUser");
        this.$store.dispatch("removeToken");
         this.$store.dispatch("deleteProduct");
        this.$router.push({ path: "/my" });
      } else {
        this.$dialog.alert({
          message: "未登录",
        });
      }
    },
  },
};
</script>

<style scoped>
.content {
  background-color: #f2f2f2;
  height: 1200px;
}
.box {
  margin-bottom: 20px;
  margin-top: 5px;
}
.nav-img {
  display: flex;
}
.nav-img img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 20px;
}
.nav-img p span {
  font-size: 16px;
  font-weight: 900;
}
.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}

.search-icon {
  font-size: 16px;
  line-height: inherit;
}
.Shipping {
  height: 50px;
}
.van-cell {
  margin-top: 2px;
}
.content {
}
.content .cont {
  width: 100%;
  height: 50px;
  margin-top: 5px;
  text-align: center;
  line-height: 50px;
  background-color: #ffffff;
}
</style>
